<template>
  <div class="table">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-friendadd"></i>广告数据走势
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="top">广告走势</div>
      <div class="title">
        <h2>选择查看周期:</h2>
        <div class="block">
          <!--调试用来查看是显示时间戳还是日期 <div class="demonstration">值：{{ dateRange }}</div> -->

          <el-date-picker
            v-model="dateRange"
            :picker-options="pickerOptions"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy 年 MM 月 dd 日"
            value-format="timestamp"
            @change="changeData"
          ></el-date-picker>
        </div>
      </div>
      <div class="line_box">
        <div class="box">
          <schart
            ref="line"
            class="schart"
            canvasId="line"
            :data="data"
            type="line"
            :options="options1"
          ></schart>
        </div>
        <div class="box">
          <schart
            ref="line"
            class="schart"
            canvasId="line2"
            :data="data2"
            type="line"
            :options="options2"
          ></schart>
        </div>
        <div class="box">
          <schart
            ref="line"
            class="schart"
            canvasId="line3"
            :data="data3"
            type="line"
            :options="options3"
          ></schart>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import * as api from "../../../http/api";
import Schart from "vue-schart";
export default {
  data() {
    return {
      id: this.$route.query.id,
      pickerMinDate: "",
      dateRange: [], //默认时间
      starTime: null, //开始时间
      endTime: null, //结束时间
      pickerOptions: {
        //日期选择问题
        onPick: ({ maxDate, minDate }) => {
          this.pickerMinDate = minDate.getTime();
          if (maxDate) {
            this.pickerMinDate = "";
          }
        },
        disabledDate: time => {
          if (this.pickerMinDate !== "") {
            const day30 = (30 - 1) * 24 * 3600 * 1000;
            let maxTime = this.pickerMinDate + day30;
            if (maxTime > new Date()) {
              maxTime = new Date();
            }
            return time.getTime() > maxTime;
          }
          return time.getTime() > Date.now();
        }
      },
      options1: {
        //图表
        title: "站内阅读量",
        fillColor: "#FC6FA1",
        axisColor: "#008ACD",
        contentColor: "#EEEEEE",
        bgColor: "#F5F8FD",
        bottomPadding: 30,
        topPadding: 30
      },
      options2: {
        //图表
        title: "站外阅读量",
        fillColor: "#FC6FA1",
        axisColor: "#008ACD",
        contentColor: "#EEEEEE",
        bgColor: "#F5F8FD",
        bottomPadding: 30,
        topPadding: 30
      },
      options3: {
        //图表
        title: "分享数量",
        fillColor: "#FC6FA1",
        axisColor: "#008ACD",
        contentColor: "#EEEEEE",
        bgColor: "#F5F8FD",
        bottomPadding: 30,
        topPadding: 30
      },
      data: [],
      data2: [],
      data3: [],
      dataList: [], //存放时间范围中的所有日期数
      Token: sessionStorage.getItem("Token")
    };
  },
  methods: {
    getData(star, end) {
      this.$post(api.advert_single_statistics, {
        token: this.Token,
        advert_id: this.id,
        starting_time: this.starTime,
        end_time: this.endTime
      }).then(res => {
        if (res.status == "0") {          
          this.data = res.data.app.map((val, index, arr) => {
            let jsons = [];
            jsons.name = val.name;
            jsons.value = val.value;
            return jsons;
          });
           this.data2 = res.data.web.map((val, index, arr) => {
            let jsons = [];
            jsons.name = val.name;
            jsons.value = val.value;
            return jsons;
          });
          this.data3 = res.data.share.map((val, index, arr) => {
            let jsons = [];
            jsons.name = val.name;
            jsons.value = val.value;
            return jsons;
          });
        }
      });
    },
    renderChart() {
      this.$refs.line.renderChart();
      this.$refs.line1.renderChart();
    },

    changeData() {
      //当时间选择器改变时间
      this.starTime = this.dateRange[0] / 1000;
      this.endTime = this.dateRange[1] / 1000;
      this.getData(this.starTime, this.endTime);
    }
  },
  created() {
    //1.获取当前时间戳   
    var a = new Date().toLocaleDateString();
    var b;
    //2.为了在显示位置显示今天的时间日期！
    b =a.replace(/\//g,'-')
    this.dateRange=[new Date(b),new Date(b)];
    //3. 为了把时间戳传递到获取数据的方法中，让折线图出现
    var nowdate = new Date(a) / 1000;
    this.starTime = nowdate;
    this.endTime = nowdate;
   
    this.getData(this.starTime, this.endTime);
  },
  mounted() {},
  components: {
    Schart
  }
};
</script>
<style scoped>
.container {
  overflow: hidden;
}
.top {
  font-size: 20px;
  padding: 10px 0;
  margin-bottom: 10px;
  font-weight: bold;
  border-bottom: 1px solid #ccc;
}
.title {
  display: flex;
  padding: 10px 0;
  align-items: center;
}
.title h2 {
  font-size: 16px;
  margin-right: 20px;
  font-weight: normal;
  font-family: "microsoft yahei";
}
.box {
  padding: 40px;
}
</style>
